import React, { useEffect } from 'react';
import { Form, Button } from 'antd';
import { withRouter, router } from 'umi';
import { QuickForm } from 'vv-frontend-components';
import DateRange from '@/components/DateRange';
import moment from 'moment';
import Locale from '@/utils/locale';
// import CompanyDepart from '@/components/CompanyDepart';
import { SelectCompany } from '../components';

const Search = ({ location, form }) => {
    const { query, pathname } = location;

    const dateTypes = [
        {
            label: Locale.set('component.dateRange.week'),
            type: 'week'
        },
        {
            label: Locale.set('component.dateRange.month'),
            type: 'month'
        }
    ];
    const config = [
        {
            field: 'companyId',
            label: Locale.set('flow.manage.stat.xzgsbm'),
            config: {
                initialValue: (query.companyId && parseInt(query.companyId, 10)) || 101
            },
            component: <SelectCompany />
        },
        {
            field: 'date',
            config: {
                initialValue: {
                    range: [
                        typeof query.startTime === 'undefined' ? moment().startOf('month') : moment(query.startTime),
                        typeof query.endTime === 'undefined' ? moment().endOf('month') : moment(query.endTime)
                    ],
                    type: typeof query.dateType === 'undefined' ? 'month' : query.dateType
                }
            },
            component: <DateRange allowClear={false} dateTypes={dateTypes} />
        },
        {
            component: (
                <div>
                    <Button type="primary" htmlType="submit">
                        {Locale.set('form.search', false)}
                    </Button>
                </div>
            )
        }
    ];
    const setUrl = values => {
        const payload = {
            companyId: values.companyId || '',
            dateType: values.date.type || '',
            startTime: moment(values.date.range[0]).format('YYYY-MM-DD') || '',
            endTime: moment(values.date.range[1]).format('YYYY-MM-DD') || ''
        };
        history.push({ pathname, query: { ...query, ...payload } });
    };
    const handleSearch = React.useCallback(e => {
        e.preventDefault();
        form.validateFields((err, values) => {
            if (!err) {
                setUrl(values);
            }
        });
    }, []);
    useEffect(() => {
        setUrl(form.getFieldsValue());
    }, []);
    // const handleReset = React.useCallback(() => {
    //     history.push({ pathname, query: {} });
    // }, []);

    return (
        <Form layout="inline" onSubmit={handleSearch}>
            <QuickForm form={form} config={config} />
            {/* <Form.Item>
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
            </Form.Item>
            <Form.Item>
                <Button onClick={handleReset}>置空</Button>
            </Form.Item>  */}
        </Form>
    );
};

const FormSearch = Form.create({ name: 'Search' })(Search);

export default withRouter(FormSearch);
